<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAdmin 日期控件restrictedDatetimepicker使用示例</title>
    <link rel="stylesheet" href="../assets/libs/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/libs/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/libs/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css">
    <style>
        .example-section {
            margin: 30px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .code-block {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .demo-form {
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">FastAdmin 日期限制功能使用示例</h1>
        
        <!-- 基本使用示例 -->
        <div class="example-section">
            <h2>1. 基本使用示例</h2>
            <p>在表单中使用自定义日期选择器，限制只能选择工作日：</p>
            
            <div class="code-block">
                <strong>HTML代码：</strong>
                <pre>&lt;div class="form-group"&gt;
    &lt;label for="c-date" class="control-label col-xs-12 col-sm-2"&gt;选择日期:&lt;/label&gt;
    &lt;div class="col-xs-12 col-sm-8"&gt;
        &lt;input id="c-date" name="row[date]" type="text" class="form-control datetimepicker" 
               data-date-format="YYYY-MM-DD" 
               data-use-current="false"
               data-restriction-config='{"restrictionType": "workdays"}'&gt;
    &lt;/div&gt;
&lt;/div&gt;</pre>
            </div>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date1" class="control-label col-xs-12 col-sm-2">选择工作日:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date1" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-restriction-config='{"restrictionType": "workdays"}'>
                    </div>
                </div>
            </div>
        </div>

        <!-- 自定义工作日示例 -->
        <div class="example-section">
            <h2>2. 自定义工作日示例</h2>
            <p>限制只能选择周二、周三、周四：</p>
            
            <div class="code-block">
                <strong>HTML代码：</strong>
                <pre>&lt;input id="c-date" type="text" class="form-control datetimepicker" 
       data-date-format="YYYY-MM-DD" 
       data-use-current="false"
       data-restriction-config='{
           "restrictionType": "custom",
           "allowedWeekdays": [2, 3, 4]
       }'&gt;</pre>
            </div>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date2" class="control-label col-xs-12 col-sm-2">选择周二到周四:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date2" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-restriction-config='{"restrictionType": "custom", "allowedWeekdays": [2, 3, 4]}'>
                    </div>
                </div>
            </div>
        </div>

        <!-- 指定日期示例 -->
        <div class="example-section">
            <h2>3. 指定可选日期示例</h2>
            <p>只允许选择特定的几个日期：</p>
            
            <div class="code-block">
                <strong>HTML代码：</strong>
                <pre>&lt;input id="c-date" type="text" class="form-control datetimepicker" 
       data-date-format="YYYY-MM-DD" 
       data-use-current="false"
       data-restriction-config='{
           "restrictionType": "specific",
           "allowedDates": ["2024-12-25", "2024-12-26", "2024-12-27"]
       }'&gt;</pre>
            </div>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date3" class="control-label col-xs-12 col-sm-2">选择指定日期:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date3" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-restriction-config='{"restrictionType": "specific", "allowedDates": ["2024-12-25", "2024-12-26", "2024-12-27"]}'>
                    </div>
                </div>
            </div>
        </div>

        <!-- 禁用日期示例 -->
        <div class="example-section">
            <h2>4. 禁用特定日期示例</h2>
            <p>禁用特定的日期，其他日期都可选：</p>
            
            <div class="code-block">
                <strong>HTML代码：</strong>
                <pre>&lt;input id="c-date" type="text" class="form-control datetimepicker" 
       data-date-format="YYYY-MM-DD" 
       data-use-current="false"
       data-restriction-config='{
           "restrictionType": "disabled",
           "disabledDates": ["2024-12-24", "2024-12-31"]
       }'&gt;</pre>
            </div>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date4" class="control-label col-xs-12 col-sm-2">禁用特定日期:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date4" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-restriction-config='{"restrictionType": "disabled", "disabledDates": ["2024-12-24", "2024-12-31"]}'>
                    </div>
                </div>
            </div>
        </div>

        <!-- 使用配置键示例 -->
        <div class="example-section">
            <h2>5. 使用配置键示例</h2>
            <p>通过配置键引用预设的日期限制配置：</p>
            
            <div class="code-block">
                <strong>HTML代码：</strong>
                <pre>&lt;input id="c-date" type="text" class="form-control datetimepicker" 
       data-date-format="YYYY-MM-DD" 
       data-use-current="false"
       data-config-key="course_schedule"&gt;</pre>
            </div>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date5" class="control-label col-xs-12 col-sm-2">使用配置键:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date5" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-config-key="course_schedule">
                    </div>
                </div>
            </div>
            
            <div class="code-block">
                <strong>JavaScript代码（设置全局配置）：</strong>
                <pre>// 设置全局配置
window.setDateRestrictionConfig('course_schedule', {
    restrictionType: 'workdays'
});

// 或者通过AJAX从服务器获取配置
$.get('/admin/daterestriction/getConfig', {key: 'course_schedule'}, function(config) {
    window.setDateRestrictionConfig('course_schedule', config);
});</pre>
            </div>
        </div>

        <!-- JavaScript API 示例 -->
        <div class="example-section">
            <h2>6. JavaScript API 使用示例</h2>
            
            <div class="demo-form">
                <div class="form-group">
                    <label for="demo-date-api" class="control-label col-xs-12 col-sm-2">API测试:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="demo-date-api" type="text" class="form-control datetimepicker" 
                               data-date-format="YYYY-MM-DD" 
                               data-use-current="false"
                               data-restriction-config='{"restrictionType": "workdays"}'>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12 col-sm-offset-2 col-sm-8">
                        <button type="button" id="test-update-config" class="btn btn-primary">切换到周末模式</button>
                        <button type="button" id="test-validate-date" class="btn btn-info">验证日期</button>
                        <button type="button" id="test-get-config" class="btn btn-success">获取配置</button>
                    </div>
                </div>
            </div>
            
            <div class="code-block">
                <strong>动态更新配置：</strong>
                <pre>// 更新日期选择器的限制配置
$('#c-date').restrictedDatetimepicker('updateConfig', {
    restrictionType: 'weekends'
});

// 获取当前配置
var config = $('#c-date').restrictedDatetimepicker('getConfig');

// 验证日期是否符合限制
var isValid = $('#c-date').restrictedDatetimepicker('validateDate', '2024-12-25');

// 销毁日期选择器
$('#c-date').restrictedDatetimepicker('destroy');</pre>
            </div>
        </div>

        <!-- 事件处理示例 -->
        <div class="example-section">
            <h2>7. 事件处理示例</h2>
            
            <div class="code-block">
                <strong>监听日期变化事件：</strong>
                <pre>$('#c-date').on('dp.change', function(e) {
    console.log('日期已更改:', e.date.format('YYYY-MM-DD'));
});

$('#c-date').on('dp.error', function(e) {
    console.log('日期选择错误:', e.date);
});

$('#c-date').on('restriction.applied', function(e) {
    console.log('限制配置已应用:', e.config);
});</pre>
            </div>
        </div>

        <!-- 控制器使用示例 -->
        <div class="example-section">
            <h2>8. 控制器使用示例</h2>
            
            <div class="code-block">
                <strong>在控制器中获取配置：</strong>
                <pre>// 在控制器中
public function getDateConfig()
{
    $dateRestriction = new \app\admin\controller\DateRestriction();
    
    // 获取预定义配置
    $configs = $dateRestriction->getConfigs();
    
    // 获取特定配置
    $config = $dateRestriction->getConfig('course_schedule');
    
    // 获取快速日期按钮
    $quickButtons = $dateRestriction->getQuickDateButtons();
    
    return json(['code' => 1, 'data' => $config]);
}</pre>
            </div>
        </div>

        <div class="alert alert-info">
            <h4>注意事项：</h4>
            <ul>
                <li>确保已正确引入 custom-datetimepicker-fastadmin.js 文件</li>
                <li>日期格式必须为 YYYY-MM-DD</li>
                <li>星期数字：0=周日, 1=周一, 2=周二, ..., 6=周六</li>
                <li>配置键必须在数据库中存在对应的配置记录</li>
                <li>可以通过 data-config-key 或 data-restriction-config 两种方式配置限制</li>
            </ul>
        </div>
    </div>

    <!-- 引入必要的JavaScript文件 -->
    <script src="../assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../assets/libs/moment/min/moment.min.js"></script>
    <script src="../assets/libs/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
    <script src="../assets/js/custom-datetimepicker-fastadmin.js"></script>
    
    <script>
        $(document).ready(function() {
            // 设置全局配置示例（用于配置键演示）
            window.setDateRestrictionConfig('course_schedule', {
                restrictionType: 'workdays'
            });
            
            // 初始化所有日期选择器
            $('.datetimepicker').each(function() {
                var $this = $(this);
                var options = {
                    format: 'YYYY-MM-DD',
                    locale: 'zh-cn',
                    useCurrent: false
                };
                
                // 解析 data-restriction-config 属性
                var restrictionConfig = $this.data('restriction-config');
                if (restrictionConfig) {
                    if (typeof restrictionConfig === 'string') {
                        try {
                            restrictionConfig = JSON.parse(restrictionConfig);
                        } catch (e) {
                            console.error('解析限制配置失败:', e);
                            restrictionConfig = {};
                        }
                    }
                    // 合并限制配置到选项中
                    $.extend(options, restrictionConfig);
                }
                
                // 解析 data-config-key 属性
                var configKey = $this.data('config-key');
                if (configKey) {
                    options.configKey = configKey;
                }
                
                // 初始化日期选择器
                $this.restrictedDatetimepicker(options);
            });
            
            // 添加一些测试按钮的事件处理
             $('#test-update-config').on('click', function() {
                 var $target = $('#demo-date-api');
                 var currentConfig = $target.data('current-restriction') || 'workdays';
                 
                 if (currentConfig === 'workdays') {
                     $target.restrictedDatetimepicker('updateConfig', {
                         restrictionType: 'weekends'
                     });
                     $target.data('current-restriction', 'weekends');
                     $(this).text('切换到工作日模式');
                     alert('已更新为只能选择周末');
                 } else {
                     $target.restrictedDatetimepicker('updateConfig', {
                         restrictionType: 'workdays'
                     });
                     $target.data('current-restriction', 'workdays');
                     $(this).text('切换到周末模式');
                     alert('已更新为只能选择工作日');
                 }
             });
             
             $('#test-validate-date').on('click', function() {
                 var testDate = moment().format('YYYY-MM-DD'); // 使用今天的日期
                 var isValid = $('#demo-date-api').restrictedDatetimepicker('validateDate', testDate);
                 var dayName = moment(testDate).format('dddd');
                 alert('今天 (' + testDate + ', ' + dayName + ') 是否符合当前限制: ' + (isValid ? '是' : '否'));
             });
             
             $('#test-get-config').on('click', function() {
                 var config = $('#demo-date-api').restrictedDatetimepicker('getConfig');
                 alert('当前配置: ' + JSON.stringify(config, null, 2));
             });
        });
    </script>
</body>
</html>